<!--
 * @FileDescription: 模型设置 重置 二次确认弹窗
 * @Author: 祝小文
 * @Date: 2022-11-03 20:02
-->
<script setup lang="ts">
const chemicalStore = useChemicalStore()

const emit = defineEmits(['modelReset'])

/** 取消 */
const cancel = () => {
  chemicalStore.modelResetConfirmShow = false
}

/** 保存 */
const confirm = () => {
  emit('modelReset')
  cancel()
}
</script>

<template>
  <div class="delete-confirm-dialog">
    <el-dialog
      v-model="chemicalStore.modelResetConfirmShow"
      title="提示"
      width="380px"
      hight="245px"
      :show-close="false"
    >
      <div class="delete-confirm-dialog-content">
        <i></i>
        <span>是否确认将模型复位</span>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取&nbsp;&nbsp;消</el-button>
          <el-button @click="confirm">确&nbsp;&nbsp;定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="less" scoped>
.delete-confirm-dialog {
  /deep/.el-overlay-dialog {
    top: 200px;
  }
  /deep/.el-dialog {
    background: rgba(1, 7, 17, 0.8);
    .el-dialog__title {
      font-size: 20px;
      font-weight: 700;
      color: #fffefe;
    }
    .delete-confirm-dialog-content {
      text-align: center;
      font-size: 16px;
      font-weight: 700;
      color: #fffefe;
      i {
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-right: 8px;
        background-image: url(@/assets/image/common/ts-icon.svg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        vertical-align: sub;
      }
    }

    .el-dialog__footer {
      margin-top: 10px;
      text-align: center;
      .el-button {
        width: 100px;
        height: 30px;
        border: 0;
        color: #ffffff;
        border-radius: 10px;
      }

      .el-button:nth-child(1) {
        background: #778082;
        margin-right: 20px;
      }

      .el-button:nth-child(2) {
        background: #02979b;
      }
    }
  }
}

/deep/.el-dialog__body {
  padding: 10px 20px;
}
</style>
